<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<style>
.honeybutton {
    padding: 15px 32px;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0 0 20px 0px rgba(0,0,0,1);
    border-radius:30px 30px;
    font-weight:1000;
}
</style>
<body>
	<iframe id="bground" class="visible-lg-block" src="" width="100%" height="100%" style="z-index: -1;width: 100%;position:fixed "></iframe>
	<nav th:include="blog/index/include_blog::nav"  class="navbar navbar-default navbar-fixed-top"></nav><!-- 上移悬停下移消失navbar-custom -->
	<header class="honey-header">
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
					<div class="head-top">
						<span class="texthong">欢迎访问:&nbsp;<b th:text="${others.userName}"></b>&nbsp;的主页</span>
						<div class="row clearfix">
						</div>
						
						<div class="col-md-12 column" style="background-color:rgba(124,184,199,0.7);box-shadow: 0 0 20px 0px rgba(0,0,0,1);border-radius:50px 50px">
							<div>
								<img id="personnalimg" th:src="(${#strings.isEmpty(others.avatar)}) ? @{/img/logo/honey-b.png} : @{${others.avatar}}" th:onerror="this.src='img/logo/honey-b.png'" alt="头像加载中！" data-toggle="modal" data-target="#myuserinfo" class="img-circle" height="180" width="180"/>
								<!-- 模态框（Modal） -->
								<div class="modal fade" id="myuserinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content textlan">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" 
														aria-hidden="true">×
												</button>
												<h4 class="modal-title" id="myModalLabel">
													[[${others.userName}]]:的基本信息
												</h4>
											</div>
											<div class="modal-body">
											    <div>
												       <div class="form-group">    
											                <label class="col-sm-3 control-label is-required">用户名称：</label>
											                <div class="col-sm-8">
											                    <b th:text="${others.userName}" class="form-control" ></b>
											                </div>
											            </div>
											            <div class="form-group">    
											                <label class="col-sm-3 control-label is-required">ta的邮箱：</label>
											                <div class="col-sm-8">
											                    <b th:text="${others.email}" class="form-control"></b>
											                </div>
											            </div>
											            <div class="form-group">    
											                <label class="col-sm-3 control-label is-required">电话号码：</label>
											                <div class="col-sm-8">
											                    <b th:text="${others.phonenumber}" class="form-control"></b>
											                </div>
											            </div>
											            <div class="form-group">
									                        <label class="col-sm-3 control-label">用户性别：</label>
									                        <div class="col-sm-8" th:switch="${others.sex}">
									                        	<!-- <b th:text="${others.sex==0 ? '男' : '女'}" class="form-control"></b> -->
									                        	<b class="form-control" th:case="0">男</b>
									                        	<b class="form-control" th:case="1">女</b>
									                        	<b class="form-control" th:case="*">未知</b>
									                        </div>
									                    </div>
									                    <div class="form-group">
									                        <label class="col-xs-2 control-label">备注：</label>
									                        <div class="col-xs-10">
									                            <textarea name="remark" maxlength="500" class="form-control" rows="3">[[${others.remark}]]</textarea>
									                        </div>
									                    </div>
											    </div>
											</div>
											<div class="modal-footer">
												<button type="button" class="layui-btn layui-btn-danger" 
														data-dismiss="modal">关闭
												</button>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal-dialog -->
								</div><!-- /.modal -->
								
							</div>
							<div id="gz">
							<b class="honeybutton selectfont" id="fansspan" onclick="follow()">关注</b>
							</div>
							<br>
							<b style="color: #FFFFFF;cursor:pointer;">
							粉丝:<b id="fans" th:text="${userdetail.fans}"></b>
							&#8195;关注：<b th:text="${userdetail.focus}"></b>
							&#8195;访问量：<b th:text="${userdetail.visits}"></b>
							&#8195;<b th:value="${userdetail.userId}" title="查看ta的相册" onclick="openalbom(this)">相册</b>
							</b> 
							<span class="hidden">
								<span id="userId">[[${userdetail.userId}]]</span>
								<span id="isfans">[[${isfans}]]</span>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<!-- Main Content -->
	<!-- 左边内容栏开始 -->
	<div class="col-md-12 " style="background-color:rgba(0,0,0,0)">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<div id="mainContent" >
			    <span>
			        <span id="fl"><b class="textdanlan hand">[[${others.userName}]]</b>:的动态</span>
			    </span>
			    <div class="row" id="mainContentChild"></div>
			</div>
			<div class="clearfix" id="nextpage">
				<p id="allcontent" class="blog-allcontent"><span>我是有底线的ε(┬┬﹏┬┬)3</span></p>
				<a id="morecontent" style="display: none;" class="btn btn-secondary float-right" href="javascript:void(0)" onclick="nextPage()"><span class="fontsize25">更多内容<i class="fa fa-arrow-right"></i></span></a>
			</div>
		</div>
		<div class="col-md-1"></div> 
		<hr>
        <br>
	</div>
	<!-- 左边内容栏结束 -->
	<div th:include="blog/index/include_blog::footer"></div>
	</body>
	<script type="text/javascript">
	var userId=$("#userId").text();
	var pagenum = 1;
	var pagesize= 6;
	var url = '/blog/open/otherlist?pageSize='+ pagesize + '&objColumn=' + userId +'&pageNum=';
	$(function(){
		var isfans=$("#isfans").text();
		if(isfans=='false'){
			document.getElementById("fansspan").style.color="#FF0033";
			$("#fansspan").css("background-color","#EE11EE");
			$("#fansspan").html("已关注");
		}else{
			document.getElementById("fansspan").style.color="";
			$("#fansspan").css("background-color","#A4A4A4");
			$("#fansspan").html("关注");
		}
		loadingBlog1(url,pagenum);
	})
	
	function nextPage(){
		loadingBlog1(url,pagenum);
	}
	</script>
</html>
